<script setup>
    import { ref, watch , defineProps } from 'vue';
    import axios from 'axios';

    // eslint-disable-next-line no-unused-vars
    const props = defineProps({
        wordInfo : {
            type : Object,
            require : true
        },
        buttonType : Number, //根据这个值决定是显示”登记“按钮还是”编辑“按钮
    });

    const recordRes = ref({state:0,errMsg:""});

    watch(() => props.wordInfo.word, () => {
        recordRes.value.state = 0; //重新或得新词后，重置记录单词的记录结果
    });


    function recordWord(){
        axios.post('http://127.0.0.1:5001/recordWord',{
            recordWord : props.wordInfo.word,
            dst : props.wordInfo.dst,
            wordType : 1
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function (response) {

            if(response.data.success == 'true'){
                recordRes.value.state = 1;
            }else{
                recordRes.value.state = 2;
                recordRes.value.errMsg = response.data.errMsg;
            }
        })
        .catch(function (error) {
            console.log(error);
        });
        
    }

    function editWord(){
        const params = new URLSearchParams() ;
        params.append("word",props.wordInfo.word);
        params.append("dst",props.wordInfo.dst);
        params.append("wordId",props.wordInfo.wordId);

        const baseUrl = "http://localhost:5173/wordedit.html";
        const urlWithParams = `${baseUrl}?${params.toString()}` ;

        window.open(urlWithParams, '_blank');
    }


</script>

<template>
    <div class="wordcardwrapper">
        <ul class="wordcard">
            <li class="wordspell">
                <a target="_blank" :href="`https://fanyi.baidu.com/#en/zh/${wordInfo.word}`">{{ wordInfo.word }}</a>
            </li>
            <li class="wordmean">
                {{ wordInfo.dst }}
            </li>
            <li class="wordop">
                <button v-if="buttonType === 0" @click="recordWord">登记
                </button>
                <button v-if="buttonType === 1" @click="editWord">编辑
                </button>
            </li>
        </ul>
        <p v-if="recordRes.state === 1">记录成功</p>
        <p v-if="recordRes.state === 2">记录失败:{{ recordRes.errMsg }}</p>
    </div>
</template>

<style scoped>
    .wordcardwrapper {
        margin-top: 2%;
        margin-right: 2%;
    }
    .wordcard {
        margin-bottom: 3%;
        padding-top: 2%;
        padding-bottom: 2%;
        border-style: solid;
        border-radius: 15px;
        border-color: hsla(160, 100%, 37%, 1);
        box-shadow: 3px 3px hsla(160, 100%, 20%, 1);
    }
    li {
        list-style: none;
        width: 90%;
    }
    .wordspell {
        font-weight: bold;
        font-size: 120%;
        margin-bottom: 1%;
        text-align: left;
    }

    .wordmean {
        border-bottom-style: solid;
        border-bottom-color: hsla(160, 100%, 20%, 1);
        padding-bottom: 1%;
        text-align: left;
    }

    .wordop {
        margin-top: 0.5%;
        text-align: right;
    }

</style>